import AuthenticationSelect from "@/components/AuthenticationSelect"
import { AntdModalProps } from "@/hooks/useAntdModal"
import useQuery from "@/hooks/useQuery"
import { queryProjectPipeline, saveApp, saveCodeupApp } from "@/service/deliver"
import { useRequest } from "ahooks"
import { Button, Form, Input, Modal, Radio, Select, Space, Tabs } from "antd"
import DataIdSelect from "../../../gateway/components/DataIdSelect"
import ConfigView from "./ConfigView"


const SaveApp = ({ form, modalProps, payload, closeModal, refresh }: AntdModalProps) => {
  const query = useQuery()
  const onOk = async () => {
    let data = await form.validateFields()
   if(data.devConfig){
    data.devConfig = JSON.stringify(data.devConfig)
   }
   if(data.testConfig){
    data.testConfig = JSON.stringify(data.testConfig)
   }
    await saveCodeupApp(data)
    refresh()
    closeModal()
  }
  return <Modal width={800} {...modalProps} onOk={onOk}>
    <Form labelCol={{ span: 5 }} form={form} initialValues={{
    
    }}>
      <Form.Item hidden name='id' >
        <Input />
      </Form.Item>
      <Form.Item label="应用名称" name='name' rules={[{
        required: true,
        message: '应用名称'
      }]}>
        <Input />
      </Form.Item>
      <Form.Item label="英文名称" name='enName' rules={[{
        required: true,
        message: '英文名称'
      }]}>
        <Input />
      </Form.Item>

      <Form.Item label="应用类型" name='type' rules={[{
        required: true,
        message: '应用类型'
      }]}>
        <Select options={[{
          value: '1',
          label: '主应用'
        }, {
          value: '2',
          label: '子应用'
        }, {
          value: '3',
          label: '混合应用'
        }]} />
      </Form.Item>


      <Form.Item label="Git仓库" name='gitUrl' rules={[{
        required: true,
        message: 'Git仓库'
      }]}>
        <Input />
      </Form.Item>
      <Form.Item label='流水线' name='pipeline' rules={[{
        required: true,
        message: `流水线`
      }]}>
        <Input />
      </Form.Item>

      <Form.Item noStyle shouldUpdate={(a, b) => a.type != b.type}>
        {({ getFieldValue }) => {
          if (getFieldValue('type') == '2') {
            return null
          }
          return <Tabs
            items={[
              {
                label: '开发环境配置',
                key: 'dev',
                forceRender:true,
                children: <div>
                  <Form.Item label={'关联资源'} name='devResourceId' rules={[{
                    required: true,
                    message: '关联资源'
                  }]}>
                    <DataIdSelect env='dev' />
                  </Form.Item>
                  <Form.Item label='配置' name='devConfig' >
                    {/* <Input.TextArea /> */}
                    <ConfigView />
                  </Form.Item>
                </div>
              }, {
                label: '测试环境配置',
                forceRender:true,
                key: 'test',
                children: <div>
                  <Form.Item label={'关联资源'} name='testResourceId' rules={[{
                    required: true,
                    message: '关联资源'
                  }]}>
                    <DataIdSelect env='test' />
                  </Form.Item>
                  <Form.Item label='配置' name='testConfig'>
                    {/* <Input.TextArea /> */}
                    <ConfigView />
                  </Form.Item>
                </div>
              }
            ]}
          />





        }}
      </Form.Item>



    </Form>
  </Modal>
}
export default SaveApp